<template>
  <table class="table table-hover table-bordered">
    <thead>
      <tr>
        <td>品牌ID</td>
        <td>品牌名称</td>
        <td>添加时间</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item) in $store.state.brands" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.ctime|dateFmt}}</td>
        <td>
          <button class="btn btn-danger btn-xs" @click="remove(item.id)">删除</button>
          <button class="btn btn-primary btn-xs" @click="edit(item.id)">编辑</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["brandsCount"]),
    ...mapState(["brands", "brand", "current"])
  },
  created() {
    // this.$store.dispatch("getInitBrands");
    this.getInitBrands();
  },
  methods: {
    ...mapMutations(["add", "del", "update", "getBrands", "getBrand"]),
    ...mapActions(["delBrand", "addBrand", "getInitBrands"]),
    remove(id) {
      this.delBrand(id);
    },
    edit(id) {
      this.getBrand(id);
    }
  }
};
</script>

<style>
</style>